<template>
  <div class="flex_bet">
    <div>
      <div class="flex">
        <div>签到获得爱心值：</div>
        <div>
          <el-input-number v-model="form.love_value" :min="0"></el-input-number>
        </div>
      </div>
      <h4>奖励配置</h4>
      <div class="flex">
        <div> 月度签到 </div>
        <div>
          <el-select style="width:120px" v-model="form.month_sign_in" placeholder="请选择">
            <el-option label="满勤" :value="0"></el-option>
            <el-option label="28天" :value="28"></el-option>
            <el-option label="20天" :value="20"></el-option>
            <el-option label="10天" :value="10"></el-option>
          </el-select>
        </div>
        <div> 奖励优惠券 </div>
        <div>
          <el-input v-model="form.reward_coupons" style="width:200px" placeholder="请输入"></el-input>
        </div>
        <div> 奖励张数 </div>
        <div>
          <el-input-number :precision="0" v-model="form.number_rewards" :min="0"></el-input-number>
        </div>
      </div>
      <div class="flex mt20">
        <div> 签到规则 </div>
        <div>
          <el-input type="textarea" style="width:600px" :rows="2" placeholder="请输入内容" v-model="form.rules">
          </el-input>
        </div>
      </div>

      <div class="btnBox">
        <el-button type="primary" :loading="btnLoading" @click="submit()">保 存</el-button>
      </div>
    </div>

    <div class="mt100">
      <div>————————— 示例 —————————</div>
      <div class="flex mt20">
        <div> 月度签到满勤奖励优惠券 </div>
        <div>
          <el-input disabled v-model="ExampleForm.value" placeholder="请输入"></el-input>
        </div>
      </div>

      <div class="flex mt20">
        <div> 月度签到 </div>
        <div>
          <el-select disabled style="width:120px" v-model="ExampleForm.month_sign_in" placeholder="请选择">
            <el-option label="满勤" :value="0"></el-option>
            <el-option label="28天" :value="28"></el-option>
            <el-option label="20天" :value="20"></el-option>
            <el-option label="10天" :value="10"></el-option>
          </el-select>
        </div>
        <div> 奖励优惠券 </div>
        <div>
          <el-input disabled v-model="ExampleForm.reward_coupons" placeholder="请输入"></el-input>
        </div>
        <div> 奖励张数 </div>
        <div>
          <el-input disabled v-model="ExampleForm.number_rewards" placeholder="请输入"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import signInApi from '@/api/signInApi.js'
export default {
  data () {
    return {
      form: {},
      ExampleForm: {
        value: "LM0920287809709",
        month_sign_in: 0,
        reward_coupons: "LM0920287809709",
        number_rewards: 2,
      },
      btnLoading: false,
      formLoading: false
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    // 提交
    submit () {
      if (!this.form.love_value) {
        this.$message.error('请输入签到获得爱心值!');
        return
      } else if (!this.form.month_sign_in && this.form.month_sign_in != '0') {
        this.$message.error('请选择月度签到!');
        return
      } else if (!this.form.reward_coupons) {
        this.$message.error('请输入奖励优惠券!');
        return
      } else if (!this.form.number_rewards) {
        this.$message.error('请输入奖励张数!');
        return
      } else if (!this.form.rules) {
        this.$message.error('请输入签到规则!');
        return
      }
      this.btnLoading = true;
      signInApi.addOrEdit(this.form).then(res => {
        this.btnLoading = false;
        if (res && res.data.code == 200) {
          this.$message.success('保存成功！');
          this.getDetails()
        }
      })
    },
    // 详情
    getDetails () {
      this.formLoading = true;
      signInApi.signInInfo().then(res => {
        this.formLoading = false;
        if (res && res.data.code == 200) {
          this.form = res.data.data || {};
        }
      })
    }
  }
}
</script>

<style langs="scss" scoped>
.flex_bet {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex > div {
  margin: 0 5px;
}
.mt20 {
  margin-top: 20px;
}
.mt100 {
  margin-top: 100px;
}
.btnBox {
  margin-top: 20px;
  text-align: center;
}
</style>